<template>
    <div id="main">
        <el-container style="height: 100vh">
            <el-aside width="220px" class="common">
                <el-menu :default-active="path" class="el-menu-vertical-demo common" @open="handleOpen"
                    @close="handleClose" router>
                    <div class="title common">
                        <span class="title">家医后台管理系统</span>
                    </div>
                    <el-submenu index="1" class="common-gzt noarrow">
                        <template slot="title">
                            <el-menu-item class="onlyTitle" index="/main/workbench">
                                <i class="common_img"></i>工作台
                            </el-menu-item>
                        </template>
                    </el-submenu>
                    <el-submenu index="2" class="common-qygl">
                        <template slot="title">
                            <i class="common_img"></i>
                            <span>签约管理</span>
                        </template>
                        <el-menu-item index="/main">待处理签约</el-menu-item>
                        <el-menu-item index="2-2">签约记录</el-menu-item>
                    </el-submenu>
                    <el-submenu index="3" class="common-fwgl">
                        <template slot="title">
                            <i class="common_img"></i>
                            <span>服务管理</span>
                        </template>
                        <el-menu-item index="3-1">待处理服务</el-menu-item>
                        <el-menu-item index="3-2">服务记录</el-menu-item>
                    </el-submenu>
                    <el-submenu index="4" class="common-jmgl noarrow">
                        <template slot="title">
                            <el-menu-item class="onlyTitle" index="3">
                                <i class="common_img"></i>居民管理
                            </el-menu-item>
                        </template>
                    </el-submenu>
                    <el-submenu index="5" class="common-xxgl noarrow">
                        <template slot="title">
                            <el-menu-item class="onlyTitle" index="msg">
                                <i class="common_img"></i>消息管理
                            </el-menu-item>
                        </template>
                    </el-submenu>
                    <el-submenu index="6" class="common-zlgl">
                        <template slot="title">
                            <i class="common_img"></i>
                            <span>资料管理</span>
                        </template>
                        <el-menu-item index="/main/dataoverview">机构管理</el-menu-item>
                        <el-menu-item index="/main/flowanalysis">团队管理</el-menu-item>
                        <el-menu-item index="/main/learninganalysis">医生管理</el-menu-item>
                        <el-menu-item index="/main/livebroadcastanalysis">服务包管理</el-menu-item>
                        <el-menu-item index="/main/livebroadcastanalysis">服务项目管理</el-menu-item>
                        <el-menu-item index="/main/livebroadcastanalysis">业绩目标管理</el-menu-item>
                    </el-submenu>
                    <el-submenu index="7" class="common-sjtj">
                        <template slot="title">
                            <i class="common_img"></i>
                            <span>数据统计</span>
                        </template>
                        <el-menu-item index="7-1">数据概况</el-menu-item>
                        <el-menu-item index="7-1">签约业绩统计</el-menu-item>
                        <el-menu-item index="7-1">服务业绩统计</el-menu-item>
                        <el-menu-item index="7-1">居民健康异常统计</el-menu-item>
                        <el-menu-item index="7-1">居民标签统计</el-menu-item>
                        <el-menu-item index="7-1">居民年龄统计</el-menu-item>
                        <el-menu-item index="7-1">居民学历统计</el-menu-item>
                        <el-menu-item index="7-1">居民性别统计</el-menu-item>
                    </el-submenu>
                    <el-submenu index="9" class="common-setting">
                        <template slot="title">
                            <i class="common_img"></i>
                            <span>系统设置</span>
                        </template>
                        <el-menu-item index="4-1">标签管理</el-menu-item>
                        <el-menu-item index="4-1">角色管理</el-menu-item>
                        <el-menu-item index="4-1">资讯管理</el-menu-item>
                        <el-menu-item index="4-1">药品管理</el-menu-item>
                        <el-menu-item index="4-1">轮播图管理</el-menu-item>
                        <el-menu-item index="4-1">系统公告</el-menu-item>
                        <el-menu-item index="4-1">协议管理</el-menu-item>
                        <el-menu-item index="4-1">操作日志</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-container>
                <el-header style="text-align: right; font-size: 12px" class="common">
                    <div class="news">
                        <img src="../assets/main/u1040.png" alt="">
                    </div>
                    <el-dropdown trigger="click" placement="bottom">
                        <div class="avatar common">
                            <div>
                                <img src="../assets/main/u412.png"/>
                            </div>
                            <span>{{ userInfo.userName }}</span>
                            <i class="arrow"></i>
                        </div>
                        <el-dropdown-menu slot="dropdown" class="common">
                            <el-dropdown-item>
                                我的资料
                            </el-dropdown-item>
                            <el-dropdown-item>
                                重置密码
                            </el-dropdown-item>
                            <el-dropdown-item>
                                退出系统
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-header>
                <div class="router__wrap">
                    <router-view></router-view>
                </div>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    name: 'mMain',
    data() {
        return {
            userInfo: {
                userName: "Unknown",
            },
        };
    },
    computed: {
        path() {
            return this.$route.path;
        },
    },
    methods: {
        handleOpen() { },
        handleClose() { },
    },
    mounted() {
        this.$notify({
            type: 'success',
            message: '登录成功!',
            offset: 66
        })
    }
};
</script>

<style lang="less">
.el-header.common {
    background: url(../assets/login/u408.jpg) no-repeat 20px center;
    background-size: 32px 32px;
    background-color: #fff;
    color: #333;
    line-height: 60px;
    box-shadow: 0px 4px 4px rgb(0 0 0 / 3%);
    display: flex;
    align-items: center;
    .news{
        margin-left: 950px;
        margin-right: 50px;
        height: 18px;
        cursor: pointer;
    }
}

.el-dropdown{
    display: block;
}

.el-menu.common {
    height: 100%;
}

.el-aside.common {
    color: #ccc;
    height: 100%;
    background-color: #fff;

    .el-menu-item,
    .el-submenu__title {
        height: 48px;
        color: #999;

        &>a {
            color: #999;
        }
    }

    &::-webkit-scrollbar {
        width: 4px;
    }

    &::-webkit-scrollbar-track {
        background-color: rgb(230, 230, 230);
    }

    &::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg,
                #666EE8 40%,
                #5f6292 100%)
    }
}

.avatar.common {
    cursor: pointer;
    width: 140px;
    display: flex;
    align-items: center;
    color: #333;

    .arrow{
        width: 0;
        height: 0;
        margin-left: auto;
        border: 5px solid transparent;
        border-top-color: #CCCCCC;
        transform: translateY(25%);
    }

    div {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 10px;

        img {
            width: 100%;
            height: 100%;
        }
    }
}

.common.el-dropdown-menu {
    left: 1241px !important;
    .popper__arrow {
        border: none;

        &::after {
            content: none;
        }
    }
}

.common>.el-dropdown-menu__item {
    display: flex;
    align-items: center;
    width: 140px;
    padding: 0 20px 0 10px;

    img {
        margin-right: 12px;
    }

    &:first-of-type {
        padding-left: 12px;
    }

    &:not(.is-disabled):hover {
        color: inherit;
        background-color: rgba(242, 242, 242, 1);
    }
}

.title.common {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 80px;

    .icon__bg {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
    }

    span {
        color: var(--blue);
        margin-left: -20px;
        font-size: 18px;
    }
}

.common_img {
    width: 36px;
    height: 13.9px;
    background-size: auto 100%;
    background-position: center 0;
    background-repeat: no-repeat;
}

#main {

    .el-menu-item:focus,
    .el-menu-item:hover,
    .el-submenu__title:hover,
    .el-submenu__title a:hover {
        background-color: transparent;
        color: #000;
    }

    .el-submenu__title a {
        transition: .3s;
        line-height: 48px;
        display: inline-block;
        width: 90%;
    }

    .el-icon-arrow-down::before {
        font-weight: bold;
    }

    .el-menu-item {
        line-height: 48px;
        height: 48px;
        text-indent: 18px;
        color: #999;
    }

    .el-menu-item.is-active {
        color: #fff;
        font-weight: bold;
        position: relative;
        background-color: var(--blue);

    }
}

.common_img {
    display: inline-block;
}

.common-gzt .common_img {
    background-image: url(../assets/main/u440.png);
}

.common-qygl .common_img {
    background-image: url(../assets/main/u445.png);
}

.common-fwgl .common_img {
    background-image: url(../assets/main/u446.png);
}

.common-jmgl .common_img {
    background-image: url(../assets/main/u447.png);
}

.common-xxgl .common_img {
    background-image: url(../assets/main/u442.png);
}

.common-zlgl .common_img {
    background-image: url(../assets/main/u448.png);
}

.common-sjtj .common_img {
    background-image: url(../assets/main/u441.png);
}

.common-setting .common_img {
    background-image: url(../assets/main/u444.png);
}

.router__wrap {
    padding-top: 18px;
    height: 100%;
    overflow-y: auto;
    background-color: #f0f2f5;

    &>div {
        width: 1138px;
        margin: 0 auto;
    }
}

.alertCont {
    width: auto;

    .el-message-box__btns {
        text-align: start;
    }

    .el-button--small {
        width: 72px;
        height: 32px;
        margin-left: 30px;
        border-radius: 0;
        background-color: #1890FF;
        margin-bottom: 10px;
    }

    .alertCont {
        padding: 30px;

        div {
            width: 582px;
            height: 105px;
            background-size: cover;
        }
    }
}

.noarrow .el-icon-arrow-down:before {
    display: none !important;
}

.m-active-class{
    background-color: var(--blue);
}

.onlyTitle{
    width: 219px;
    padding: 0 20px !important;
    transform: translateX(-20px);
    text-indent: 0 !important;
    font-size: 14px;
    font-weight: normal !important;
    color: #999;
    position: absolute;
}
</style>